<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid</title>
</head>
<style>
  li {
    background-color: pink;
  }

  #container{
    display: grid;
    /* grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。下面代码代表着指定了一个三行四列的表 */
    /* 除了使用绝对单位，也可以使用百分比。 */
    grid-template-columns: 50px 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
  }


  .item {
    font-size: 2em;
    text-align: center;
    border: 1px solid #e5e4e9;
  }

  .item-1 {
    background-color: #ef342a;
  }

  .item-2 {
    
    background-color: #f68f26;
  }

  .item-3 {
    background-color: #4ba946;
  }

  .item-4 {
    background-color: #0376c2;
  }

  .item-5 {
    background-color: #c077af;
  }

  .item-6 {
    background-color: #f8d29d;
  }

  .item-7 {
    background-color: #b5a87f;
  }

  .item-8 {
    background-color: #d0e4a9;
  }

  .item-9 {
    background-color: #4dc7ec;
  }

</style>
<body>
  <ol>
    <li>下面代码中，最外层的<div>元素就是容器，内层的三个<div>元素就是项目。</li>
    <li>Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。这部分先介绍容器属性。</li>
    <li>默认情况下，容器元素都是块级元素，但也可以设成行内元素。</li>
  </ol>
  <div id="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
    <div class="item item-4">4</div>
    <div class="item item-5">5</div>
    <div class="item item-6">6</div>
    <div class="item item-7">7</div>
    <div class="item item-8">8</div>
    <div class="item item-9">9</div>
  </div>
</body>
</html>